<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>

		<link rel="stylesheet" type="text/css" href="./js/dijit/themes/tundra/tundra.css"/>
		<style type="text/css">
			html,body {margin:0px;padding:0px;}
			div {border:1px solid red}
			#container {position:relative;top:20px;width:854px;height:auto;background:#33ff00;}
			#subRelContainer {position:relative;width:200px;height:400px;left:30px;top:50px;}
			#subRelContainer #absUnderRelContainer{position:absolute;width:200px;height:56px;left:45px;top:80px;}
			#floatContainer {float:left;width:50px;height:150px;background:#33ffff};
		</style>

	</head>
	<body>
		<div id="container" style="overflow:hidden;">
			<div id="subRelContainer">
				<div id="absUnderRelContainer">absUnderRelContainer</div>
				<div id="floatContainer">floatContainer</div>
			</div>

		</div>
	</body>
</html>

		<script src="./js/dojo/dojo.js"></script>
		<script type="text/javascript">
			
			/**
			 * @notice
			 * position and marginBox contain border
			 * content box do not contain border
			 * @param {Object} dojo.byId('subRelContainer'
			 */
		dojo.ready(function(){
			var domNode = dojo.byId('subRelContainer');
			
			dumpPositionInfo(domNode);
			
			dumpPositionInfo( dojo.byId('absUnderRelContainer'));
			

			//dojo.query('body').
			dojo.connect(null,'onclick',function(evt){
				
				//console.log(this);
				console.log( "clientX:" + evt.clientX + 'Y: ' +evt.clientY );
				console.log( "pageX:" + evt.pageX + 'Y: ' +evt.pageY );
				console.log( "X:" + evt.x + 'Y: ' +evt.y );
				console.log( "screenX:" + evt.screenX + 'Y: ' +evt.screenY );
			});
			
		});	
		
		function dumpPositionInfo( domNode ) {
			console.log( domNode );
			console.log('positonInfo: ');
			console.log(dojo.position(domNode));
			console.log('marginBox: ');
			console.log( dojo.marginBox( domNode ));
			console.log('contentBox: ');
			console.log(dojo.contentBox(domNode));
		}


		</script>
